<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<image class="logo" src="../../static/images/logo.png" mode="scaleToFill"></image>
			<view class="search">
				<input type="text" placeholder="搜索商品" placeholder-class="placeholder" />
			</view>
			<button type="default">哈哈</button>
		</view>
		<!-- 导航 -->
		<scroll-view scroll-x="true" enable-flex class="scorllContainer" v-if="indexData.kingKongModule">
			<view class="scrollItem " :class="{active:navIndex === 0}" :index="0"
			 @click="changeNav(0,0)">推荐</view>
			<view class="scrollItem" :class="{active:navIndex === index+1}"
			 v-for="(item,index) in indexData.kingKongModule.kingKongList" 
			:key="item.L1Id" @click="changeNav(index+1,item.L1Id)">{{item.text}}</view>
		</scroll-view>
		
		<!-- 推荐页 -->
		<Recommend v-if="navId === 0"></Recommend>
		<!-- tab栏其他页 -->
		<CateList v-else :navId="navId"></CateList>
			
		
	</view>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import Recommend from '../../components/Recommend/Recommend.vue'
	import CateList from '../../components/cateList/cateList.vue'
	export default {
		components:{
			Recommend,
			CateList
		},
		data() {
			return {
				navIndex:0,
				navId:0
			}
		},
		computed:{
			...mapState('indexModule',['initData','indexData'])
		},
		methods:{
			...mapActions('indexModule',['getIndexDataAction']),
			// 切换tab栏
			changeNav(index,id){
				// 性能优化,点击的不是同一个才有效
				(this.navIndex !== index) && (this.navIndex = index,
				this.navId = id)
				// if(this.navIndex !== index){
				// 	console.log(index,id)
				// 	this.navIndex = index,
				// 	this.navId = id
				// }
			}
		},
		mounted() {
			// 获取首页数据
			this.getIndexDataAction()
		}
		
	}
</script>

<style lang="stylus">
	.header
		display flex
		height 60rpx
		padding 10rpx
		.logo
			width 140rpx
			height 40rpx
			margin 10rpx 30rpx
		.search
			flex 1
			height 60rpx
			border 1rpx solid #ccc
			input 
				width 100%
				height 100%
			.placeholder
				line-height 60rpx
				text-align center
				font-size 24rpx
		button 
			height 60rpx
			line-height 60rpx
			font-size 26rpx
			color #bb2c08
			background none
			&::after
				border none
	// 导航
	.scorllContainer
		// display flex
		white-space nowrap
		height 80rpx
		box-sizing border-box;
		.scrollItem
			display inline-block
			width 140rpx
			height 80rpx
			// 判断小程序还是h5
			// #ifdef MP-WEIXIN
			// padding 0 20rpx
			// #endif
			line-height 80rpx
			text-align center
			font-size 26rpx
		.active{
			box-sizing border-box
			border-bottom 2rpx solid #bb2c08
		}
		
	
</style>
	
		
		
	